<template>
	<div class="site_portal_wrapper" v-loading="loading">
		<el-tabs class="custom_top" type="card" v-model="activeName">
			<el-tab-pane label="所有站点" name="1"></el-tab-pane>
			<el-tab-pane label="我管理的站点" name="2"></el-tab-pane>
		</el-tabs>
		<el-scrollbar>
			<div ref="imageText" class="bodybox" :style="{ '--column': responsive }">
				<el-card class="handle" shadow="hover" v-for="(item, index) in protalSiteList" :key="index">
					<div class="img">
						<img :src="item.filed1Name" :alt="item.name" />
						<template v-if="isCanEdit(item)">
							<el-switch v-model="item.del" active-value="1" inactive-value="2" @change="handleSwitchChange($event, item)"></el-switch>
						</template>
					</div>
					<div class="tit">{{ item.name }}</div>
					<el-dropdown size="medium" @command="handleCommand($event, item)" v-if="isCanEdit(item)">
						<el-button>操作</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="edit" icon="el-icon-edit">编辑站点</el-dropdown-item>
							<el-dropdown-item command="del" icon="el-icon-delete">删除站点</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<div class="btn">
						<el-button>预览</el-button>
						<el-button v-if="isCanEdit(item)">后台</el-button>
					</div>
				</el-card>
				<el-card class="filtered" shadow="hover" v-if="activeName === '2'">
					<div class="add_btn" @click="handleAddedPortal()">
						<i class="el-icon-plus"></i>
					</div>
				</el-card>
			</div>
		</el-scrollbar>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryPortalSiteData"></sw-pagination>
	</div>
</template>

<script>
import Sortable from 'sortablejs';
import { mapGetters } from 'vuex';
import dynamicColum from '@/mixins/dynamicColum';
import { getPortalSitePageList, deletePortalSite, updateDelPortalSite } from '@/api/portal/tbSiteInfo';
export default {
	mixins: [dynamicColum],
	data() {
		return {
			isFirst: true,
			loading: false,
			activeName: '1',
			queryData: { page: 1, limit: 60 },
			dataCount: 0,
			protalSiteList: []
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		isCanEdit() {
			return (data) => {
				if (this.userInfo.account !== 'admin' && this.userInfo.account !== 'dever') {
					return data.userMList.some((item) => item.userId === this.userInfo.id);
				} else {
					return true;
				}
			};
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.isFirst = true;
				this.protalSiteList = [];
				this.queryPortalSiteData();
			},
			immediate: true
		}
	},
	mounted() {
		let that = this;
		let sortable = new Sortable(this.$refs['imageText'], {
			handle: '.handle',
			onMove(evt) {
				console.log(evt);
				// return -1;
			},
			onEnd(evt) {
				console.log(evt);
				/* const oldItem = that.protalSiteList.splice(evt.oldIndex, 1)[0];
				that.protalSiteList.splice(evt.newIndex, 0, oldItem);
				if (evt.newIndex >= that.protalSiteList.length) {
					sortable.toArray().forEach((id, index) => {
						console.log(index === that.protalSiteList.length);
						if (index === that.protalSiteList.length) {
							sortable.options.disabled = true;
						} else {
							sortable.options.disabled = false;
						}
					});
				} */
			}
		});
	},
	methods: {
		//获取站点数据
		async getPortalSiteData() {
			let params = { ...this.queryData, isAll: this.activeName };
			let result = await getPortalSitePageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.protalSiteList = !result.data
					? []
					: result.data.map((n) => {
							return { ...n, filed1Name: window.staticPath + n.filed1Name };
					  });
			}
		},

		//查询站点数据
		async queryPortalSiteData() {
			this.loading = true;
			await this.getPortalSiteData();
		},

		//添加站点
		handleAddedPortal() {
			this.$router.push({ path: '/applications/form' });
		},

		//点击下拉菜单
		handleCommand(command, data) {
			let that = this;
			if (command === 'edit') {
				that.$router.push({ path: '/applications/form', query: { id: data.id } });
			} else if (command === 'del') {
				that.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					async beforeClose(action, instance, done) {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							await that.deletePortalRequest(data.id);
							instance.confirmButtonLoading = false;
							done();
						} else {
							done();
						}
					}
				}).catch(() => {});
			}
		},

		//删除站点请求
		async deletePortalRequest(id) {
			let result = await deletePortalSite(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除站点成功');
				this.queryPortalSiteData();
			}
		},

		//切换上架下架
		async handleSwitchChange(e, data) {
			let params = { id: data.id, del: e };
			let result = await updateDelPortalSite(params).then((res) => res.data);
			if (result.code === '0') {
				let message = e === '1' ? '站点上线成功' : '站点下线成功';
				this.$message.success(message);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.site_portal_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.el-scrollbar {
		height: 100%;
	}
	.el-scrollbar__wrap {
		overflow: hidden;
		overflow-y: auto;
	}
	.el-scrollbar__bar.is-horizontal {
		display: none;
	}
	.sw-pagination {
		margin: 16px;
	}
	.bodybox {
		display: grid;
		grid-gap: 16px;
		grid-template-columns: repeat(var(--column), 1fr);
		margin: 0 6px 0 0;
		padding: 16px 16px 0;
		box-sizing: border-box;
		overflow: hidden;
		.img {
			position: relative;
			padding-top: 56.25%;
			background-color: #eee;
			border-bottom: solid 1px #ebeef5;
			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.el-switch {
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		}
		.tit {
			padding: 10px;
			line-height: 1;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.btn {
			padding: 0 10px 10px;
		}
		.el-dropdown {
			float: right;
			margin-right: 10px;
		}
		.el-button {
			padding: 5px 10px;
		}
	}
	.el-card__body {
		padding: 0;
		cursor: pointer;
	}
	.add_btn {
		position: relative;
		padding-top: calc(56.25% + 68px);
		&:hover {
			color: var(--primary-hover);
		}
		i.el-icon-plus {
			position: absolute;
			top: 50%;
			left: 50%;
			font-size: 36px;
			transform: translate(-50%, -50%);
		}
	}
}
</style>
